import React, { Component } from 'react';
import { Card, Button, notification } from 'antd';

import './style.less';

class NoticePage extends Component {

  render() {
    return (
      <div className="pinlor-buttons">
        <Card title="通知提醒框" className="pinlor-cards">
          <Button type="primary" onClick={() => this.openNotification('success')}>Success</Button>
          <Button type="primary" onClick={() => this.openNotification('info')}>Info</Button>
          <Button type="primary" onClick={() => this.openNotification('warning')}>Warning</Button>
          <Button type="primary" onClick={() => this.openNotification('error')}>Error</Button>
        </Card>
        <Card title="通知提醒框" className="pinlor-cards">
          <Button type="primary" onClick={() => this.openNotification('success', 'topLeft')}>左上</Button>
          <Button type="primary" onClick={() => this.openNotification('info', 'topRight')}>右上</Button>
          <Button type="primary" onClick={() => this.openNotification('warning', 'bottomRight')}>右下</Button>
          <Button type="primary" onClick={() => this.openNotification('error', 'bottomLeft')}>左下</Button>
        </Card>
      </div>
    )
  }

  openNotification = (type, direction) => {
    if(direction){
      notification.config({
        placement: direction
      })
    }
    notification[type]({
      message: '发工资了',
      description: '上个月考勤22天，迟到12天，实发工资250，请笑纳'
    })
  }
}

export default NoticePage;
